<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <!-- <headerXX :name="title"></headerXX> -->
    <div class="pull-refresh_Search">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field name="uploader" label="图片上传">
            <template #input>
              <van-image
                @click="imgtz"
                width="100"
                height="100"
                :src="Setobj.image"
              >
                <!-- <template v-slot:default>
                  <van-icon name="plus" size="20" />
                </template> -->
              </van-image>
            </template>
          </van-field>
          <van-field
            v-model="Setobj.name"
            name="餐品名称"
            label="餐品名称"
            placeholder="餐品名称"
            :rules="[{ required: true, message: '请填写餐品名称' }]"
          />
          <van-field
            v-model="result1"
            is-link
            readonly
            name="picker"
            label="餐品分类"
            placeholder="点击选择分类"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择分类' }]"
          />
          <van-field
            v-if="Setobj.type == 2 && result1 != ''"
            v-model="result2"
            is-link
            readonly
            name="picker"
            label="餐品标签"
            placeholder="点击选择餐品标签"
            @click="showPicker2 = true"
            :rules="[{ required: true, message: '请选择标签' }]"
          />
          <van-field
            v-if="Setobj.type == 1 && result1 != ''"
            v-model="result3"
            is-link
            readonly
            name="picker"
            label="餐品标签"
            placeholder="点击选择餐品标签"
            @click="showPicker3 = true"
            :rules="[{ required: true, message: '请选择标签' }]"
          />
          <van-field name="stepper" label="价格">
            <template #input>
              <van-stepper v-model="Setobj.price" step="1" />
            </template>
          </van-field>
          <van-field name="stepper" label="起始购买数量">
            <template #input>
              <van-stepper v-model="Setobj.onceNum" step="1" />
            </template>
          </van-field>
          <van-field
            label="介绍"
            v-model="Setobj.description"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入介绍"
            show-word-limit
          />
        </van-cell-group>
        <div class="DI" style="position: fixed; bottom: 0">
          <van-button
            native-type="button"
            style="width: 46%; margin-bottom: 20px"
            @click.stop="CZxx"
            >重 置</van-button
          >
          <van-button
            native-type="submit"
            style="width: 46%; margin-bottom: 20px; margin-left: 20px"
            class="buy"
            color="#36C2A8"
            >提 交</van-button
          >
        </div>
      </van-form>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
        show-toolbar
        title="点击选择分类"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup v-model:show="showPicker2" position="bottom">
      <van-picker
        show-toolbar
        title="点击选择标签"
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="showPicker2 = false"
      />
    </van-popup>
    <van-popup v-model:show="showPicker3" position="bottom">
      <van-picker
        show-toolbar
        title="点击选择标签"
        :columns="columns3"
        @confirm="onConfirm3"
        @cancel="showPicker3 = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  queryMealCategory,
  updateMealToDishBack,
} from "@/api/realAssets/icsharedstation/CPXX/index.js";
import { Dialog, Notify } from "vant";
export default {
  data() {
    return {
      CPGLxx: JSON.parse(localStorage.getItem("CPGLxx")),
      siteData: JSON.parse(localStorage.getItem("siteData")),
      dataIndex: {},
      title: "",
      showPicker: false,
      showPicker2: false,
      showPicker3: false,
      result1: "",
      result2: "",
      result3: "",
      columns: [
        { text: "每周菜谱", value: "2" },
        { text: "每周接龙", value: "1" },
      ],
      columns2: [
        // 第一列
        {
          values: [
            { text: "周一", value: "1" },
            { text: "周二", value: "2" },
            { text: "周三", value: "3" },
            { text: "周四", value: "4" },
            { text: "周五", value: "5" },
          ],
        },
        // 第二列
        {
          values: [
            { text: "早餐", value: "1" },
            { text: "正餐", value: "2" },
          ],
        },
      ],
      columns3: [],
      Setobj: {
        id: 0,
        mealId: JSON.parse(localStorage.getItem("CPGLxx")).id,
        categoryId: "1", //预定菜的分类
        type: "", //1是接龙，2是星期
        day: "1", //1早上，2正餐
        name: "", //餐品名称
        image: "", //图片地址
        description: "", //餐品介绍
        price: 1, //价格
        sort: "", //排序
        onceNum: 1, //开始购物数量
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        remark: "", //备注
      },
    };
  },
  created() {
    this.title = this.$route.query.XX;
  },
  mounted() {
    this.getMZCPBQ();
  },
  methods: {
    //获取
    getMZCPBQ() {
      queryMealCategory({
        siteId: this.siteData.id,
      }).then((res) => {
        this.columns3 = res.data.map((item) => {
          var obj = {};
          return (obj = {
            text: item.categoryName,
            categoryType: item.categoryType,
            value: item.id,
          });
        });
        this.CSxx();
        // console.log("11", columns3.value);
      });
    },
    //分类选择
    onConfirm(val) {
      this.Setobj.type = val.value;
      //代表是周一到周五
      if (this.Setobj.type == "1") {
        this.Setobj.day = "";
      }
      this.result1 = val.text;
      this.showPicker = false;
    },
    onConfirm2(val) {
      this.result2 = val[0].text + "/" + val[1].text;
      this.Setobj.categoryId = val[0].value;
      this.Setobj.day = val[1].value;
      this.showPicker2 = false;
    },
    onConfirm3(val) {
      this.result3 = val.text;
      this.Setobj.categoryId = val.value;
      this.showPicker3 = false;
    },
    //跳转到图片列表
    imgtz() {
      // console.log(dataIndex.value);
      let li = "";
      // if (title.value == "修改菜品") {
      //   li = encodeURIComponent(JSON.stringify(dataIndex.value));
      // } else {
      //   li =encodeURIComponent(JSON.stringify(Setobj.value));
      // }
      li = encodeURIComponent(JSON.stringify(this.Setobj));
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_CPGL_IMGs",
        query: {
          XX: this.title, // 序列化对象
          obj: li,
          img: this.Setobj.image,
        },
      });
    },
    //修改就初始化信息
    CSxx() {
      // if (title.value == "修改菜品") {

      if (this.$route.query.obj != "") {
        this.dataIndex =
          JSON.parse(decodeURIComponent(this.$route.query.obj)) || {};
      }

      // }
      if (this.dataIndex.id == undefined) {
        this.dataIndex.id = 0;
      }
      if (this.dataIndex.price == undefined) {
        this.dataIndex.price = 1;
      }
      if (this.dataIndex.onceNum == undefined) {
        this.dataIndex.onceNum = 1;
      }
      this.Setobj.id = this.dataIndex.id;
      this.Setobj.mealId = this.CPGLxx.id;
      this.Setobj.categoryId = this.dataIndex.categoryId; //预定菜的分类
      if (this.dataIndex.type == undefined) {
        this.result1 = "";
      } else {
        this.Setobj.type = this.dataIndex.type; //1是接龙，2是星期
        this.columns.forEach((item) => {
          if (this.dataIndex.type == item.value) {
            this.result1 = item.text;
          }
        });
      }

      this.Setobj.day = this.dataIndex.day; //1早上，2正餐
      this.Setobj.name = this.dataIndex.name; //餐品名称
      // if(dataIndex.value.image==undefined){
      //    Setobj.value.image =""
      // }else{

      // }
      this.Setobj.image = this.$route.query.img; //图片地址
      this.Setobj.description = this.dataIndex.description; //餐品介绍
      this.Setobj.price = this.dataIndex.price; //价格
      this.Setobj.sort = ""; //排序
      this.Setobj.onceNum = this.dataIndex.onceNum; //开始购物数量
      this.Setobj.siteId = this.siteData.id;
      this.Setobj.remark = ""; //备注
      if (this.dataIndex.type == 1) {
        this.columns3.forEach((item) => {
          if (this.Setobj.categoryId == item.value) {
            this.result3 = item.text;
          }
        });
      } else {
        let XX = "";
        this.columns2[0].values.forEach((item) => {
          if (this.Setobj.categoryId == item.value) {
            XX = item.text;
          }
        });
        this.columns2[1].values.forEach((item) => {
          if (this.Setobj.day == item.value) {
            this.result2 = XX + "/" + item.text;
          }
        });
      }
    },
    CZxx() {
      Dialog.confirm({
        title: "操作提示",
        message: "以填写的信息将会重置",
      })
        .then(() => {
          if (this.title == "修改菜品") {
            this.CSxx();
          } else {
            this.Setobj.id = 0;
            this.Setobj.mealId = this.CPGLxx.id;
            this.Setobj.categoryId = "1"; //预定菜的分类
            this.Setobj.type = "2"; //1是接龙，2是星期
            this.Setobj.day = "1"; //1早上，2正餐
            this.Setobj.name = ""; //餐品名称
            this.Setobj.image = ""; //图片地址
            this.Setobj.description = ""; //餐品介绍
            this.Setobj.price = 1; //价格
            this.Setobj.sort = ""; //排序
            this.Setobj.onceNum = 1; //开始购物数量
            this.Setobj.siteId = this.siteData.id;
            this.Setobj.remark = ""; //备注
            this.result1 = "";
            this.result2 = "";
            this.result3 = "";
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
      //新增菜品
      if (this.title == "新增菜品") {
        updateMealToDishBack(this.Setobj).then((res) => {
          if (res.resultCode == 1) {
            Notify({ type: "success", message: res.data });
            //新增成功后返回页面页面
            this.$router.push({
              name: "i_life_ht_ZGST_CPGL_index",
            });
          } else {
            Notify({ type: "warning", message: "新增失败" });
          }
        });
      } else {
        Dialog.confirm({
          title: "操作提示",
          message: "餐品修改后历史记录都会以修改后为主，建议新增菜品",
        }).then(() => {
          updateMealToDishBack(this.Setobj).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              //新增成功后返回页面页面
              this.$router.push({
                name: "i_life_ht_ZGST_CPGL_index",
              });
            } else {
              if (res.data == null || res.data == "" || res.data == undefined) {
                Notify({ type: "warning", message: "修改失败" });
                return;
              }
              Notify({ type: "warning", message: res.data });
            }
          });
        });
      }
    },
    onClickLeft() {
      this.$router.push({
        name: "i_life_ht_ZGST_CPGL_index",
      });
      // router.push({
      //   name: "i_life_ht_ZGST_CPGL_index",
      // });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../../static/css/index.less";
@import "../../../../../../static/css/GYcSS.less";
.DI {
  padding-top: 10px;
  box-sizing: border-box;
  border-top: 1px solid rgb(231, 229, 229);
}
.pull-refresh_Search {
  background: #fff;
  height: calc(
    var(--real-vh, 1vh) * 100 - 120px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
}
</style>